<template>
	<view class="container-root">
		<view class="height-20rpx">			
		</view>
		
		<view class="problem-item-root" v-for="(item,index) in problemData" :key="index" @click="onItemClick(index)" >
			<view class="problem-item" hover-class="problem-item-hover">
				<view class="problem-item-left-right">
					<image class="problem-icon-left" src="/static/images/doubt.png"></image>
					<text>{{item.question}}</text>
				</view>
				<view class="problem-item-left-right">
					<image class="problem-icon-left margin-right-0" src="/static/images/right.png"></image>
				</view>
			</view>
			
			<view class="problem-line">				
			</view>
			
		</view>
	</view>
	
</template>

<script>
	import apis from '../../../api.js'
	import httpRequest from '@/utils/utilHttp.js'
	import {
		mapState,
		mapMutations
	} from 'vuex' //导入vuex的mapState和mapMutations方法
	export default {
		data() {
			return {
				position:0,
				problemData:null,
				
			}
		},
		onLoad(){
			let self = this;
			var params = {
				userCode:self.userInfo.userCode,
				token: self.token,
			}
			let options = {
				url:httpRequest.requestUrl.getQuestionReply_get,
				method:httpRequest.requestMethod.GET,
				datas:params
			};
			httpRequest.Request(options).then(res => {
				//console.log(res)				
				if (res.data.status == 200) {
					self.problemData=res.data.content;
				}				
			})
		},
		computed: {
			...mapState(['userInfo','token']), //对全局变量userInfo进行监控
		},
		methods: {
			onItemClick:function (index){			
				//console.log(index);
				uni.navigateTo({					
				    url: './repaire-common-detail/repaire-common-detail?problemDetail='+JSON.stringify(this.problemData[index]),
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1;
	}
	.height-20rpx{
		height: 20rpx;
		width: 100%;
	}
	
	.problem-item-root{
		width: 100%;
		background-color: white;
	}

	.problem-item{
		width: calc(100% - 40rpx);
		height: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx 1rpx 20rpx;
	}
	.problem-item-left-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.problem-icon-left{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.problem-icon-right{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.margin-right-0{
		margin-right: 0rpx;
	}
	.problem-line{
		width: 100%;
		height: 1rpx;
	}
</style>
